<template>
	<view>
		<view class="content">
			<view class="item">
				<label>商品名称</label>
				<input type="text" v-model="productName"/>
			</view>
			<view class="item">
				<label>商品简介</label>
				<input type="text" v-model="productIntroduce"/>
			</view>
			<view class="item">
				<label>商品规格</label>
				<input type="text" v-model="productgg"/>
			</view>
			<view class="item">
				<label>商品库存</label>
				<input type="text" v-model="productSave"/>
			</view>
			<view class="item">
				<label>商品价格</label>
				<input type="text" v-model="productPrice"/>
			</view>
			<view class="item">
				<label>成 本  价</label>
				<input type="text" v-model="costPrice"/>
			</view>
			<view class="item">
				<label>商品图片</label>
			    <image src="@/static/upload.png" @click="uploadImg" style="width: 142rpx;height: 142rpx;margin-left: 35rpx;"></image>
				<image v-for="(item, index) in imgArr" :src="item" style="width: 142rpx;height: 142rpx;"></image>
			</view>
			<view class="detail">
				<label>商品详情</label>
				<textarea @blur="bindTextAreaBlur"></textarea>
			</view>
		</view>
		<view>
			<button type="button">保存</button>
		</view>
	</view>
</template>

<script>
export default {
	data(){
		return {
			productName:'',
			productIntroduce:'',
			productgg:'',
			productSave:'',
			productPrice:'',
			costPrice:'',
			imgArr:[]
		}
	},
	methods:{
		uploadImg() {
			let that = this
			uni.chooseImage({
				success(res){
					console.log(res.tempFilePaths)
					that.imgArr = res.tempFilePaths
				}
			})
		},
		bindTextAreaBlur:function(e){
			console.log(e.detail.value)
		}
	}
}
</script>
<style lang="scss">
	.item {
		display: flex;
		flex-direction: row;
		align-items: center; 
		margin-top: 30rpx;
	}
	.item label {
		margin-left: 29rpx;
		font-size: 30rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #1B1B1B;
	}
	.item input {
		width: 506rpx;
		height: 64rpx;
		background: #FFFFFF;
		border: 2rpx solid #C8C8C8;
		border-radius: 10rpx;
		margin-right: 30rpx;
		margin-left: auto;
		padding-left: 29rpx;
	}
	.detail{
		display: flex;
		flex-direction: row;
		margin-top: 30rpx;
	}
	.detail label {
		margin-left: 29rpx;
	}
	.detail textarea {
		width: 545rpx;
		height: 272rpx;
		background: #FFFFFF;
		border: 2rpx solid #C8C8C8;
		border-radius: 10rpx;
		margin-left: 30rpx;
	}
	button {
		width: 680rpx;
		height: 94rpx;
		line-height: 94rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #1B1B1B;
		background: #FEB140;
		border-radius: 47rpx;
		margin: 158rpx 35rpx 60rpx 35rpx;
	}
</style>
